import React from 'react';
import { WeaLocaleProvider, WeaTools } from 'ecCom';
import { Table, Spin, Alert, Progress } from 'antd';
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
export default class ImportLog extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            loading: false,
            logList:[],
        }
        this.num = 1;
        this.timerID = 0;
        this.columns = [
            {
                title: getLabel(23201,'行数'),
                dataIndex: 'num',
                width:"30%",
                render:(text, record, index) =>{
                    return <div style={{"color":record.color}} >{text}</div>
                }
            },
            {
              title: getLabel(24960,'提示信息'),
              dataIndex: 'message',
              width:"70%",
              render:(text, record, index) =>{
                  return <div style={{"color":record.color}} >{text}</div>
              }
            },
          ];

    }


    componentWillMount(){
        this.setColums();
    }

    componentWillReceiveProps(newprops){

    }
    
    componentDidMount() {
        this.timerID = setInterval(
            () => this.getData(),
            500
        );
    }

    componentWillUnmount() {
        const { onCallBack } = this.props;
        this.setState({logList:[]})
        clearInterval(this.timerID);
        if(typeof onCallBack === "function"){
            onCallBack({});
        }
    }

    //设置列表列名
    setColums = () =>{
        const {titles = [],dataIndexs = [],widths = []} = this.props;
        if(titles.length > 0 && dataIndex.length > 0){
            for(let i = 0;i < titles.length;i ++){
                this.columns.push({
                    title:titles[i],
                    dataIndex:dataIndexs[i],
                    width:widths[i],
                    render:(text, record, index) =>{
                        return <div style={{"color":record.color}} >{text}</div>
                    }
                }) 
            }
        }
    }

    getData = ()=>{
        let {type,loading} = this.props;
        if(!loading){
            clearInterval(this.timerID)
        }else{
            let { logList } = this.state;
            WeaTools.callApi('/api/workrelate/goal/getImportLog', 'GET',{type}).then((res) => {
                if(res.list && res.list.length > logList.length){
                    this.setState({logList:res.list});
                }
            });
        }   
    }

    render(){
        let { loading, reslutData } = this.props;
        let { logList } = this.state;
        return (
            <div className="wea-workrelate-goal-importlog">
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@r3gzmv`} spinning = {loading} tip={getLabel('125679','正在导入数据')+'...'}>
                    <Alert ecId={`${this && this.props && this.props.ecId || ''}_Alert@k28cpu`} message={getLabel(509005,'导入数据提示')}
                    description={getLabel(509006,'导入过程中,请不要中断操作,以免数据出现错误')}
                    type="info"/>
                </Spin>
                {!loading && <p style={{"text-align":"center","font-size":"14px","line-height":"50px","color":"red"}}>{reslutData && reslutData.msg ? reslutData.msg : ""}</p>}              
                <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@8ntka8`} className="wea-workrelate-antd-table" bordered={true} scroll={{ y: window.innerHeight*0.6 - 180 }}  columns={this.columns} dataSource={loading?toJS(logList):(reslutData && reslutData.list ?toJS(reslutData.list) : [])}></Table>
            </div>
        )
    }
}